import { classifyList } from "@/services/entities/all";
import { View, Picker } from "@tarojs/components";
import { useEffect, useState } from "react";
const TypeSelect = (props) => {
  const { children } = props;
  console.log("children", children);
  const value = [];
  const [list, setList] = useState<any>([
    { name: 11, list: [{ name: "33" }, { name: "44" }] },
    { name: 22, list: [{ name: "55" }, { name: "66" }, { name: "77" }] },
  ]);
  const [firstType, setFirstType] = useState<any>([11, 22]);
  const [secondType, setSecondType] = useState<any>([33, 44]);
  const [currentFirst, setCurrentFirst] = useState(-1);
  // useEffect(() => {
  //   classifyList().then((res: any) => {
  //     setList(res);
  //   });
  // }, []);

  useEffect(() => {
    if (list.length) {
      console.log(
        "111",
        list?.map((item) => {
          return item.name;
        })
      );
      setFirstType(
        list?.map((item) => {
          return item.name;
        })
      );
      setCurrentFirst(0);
    }
  }, [list]);

  useEffect(() => {
    if (currentFirst > -1 && list.length) {
      console.log(list[currentFirst]);
      setSecondType(
        list[currentFirst]?.list.map((item) => {
          return item.name;
        })
      );
    }
  }, [currentFirst, list]);
  return (
    <Picker
      value={value}
      range={[firstType, secondType]}
      onColumnChange={(e) => {
        console.log("e", e);
        console.log(e.detail.column);
        if (e.detail.column === 0) {
          setCurrentFirst(e.detail.value);
        }
      }}
      mode="multiSelector"
      onChange={(e) => {
        console.log(e);
      }}
    >
      {children ?? "选择分类"}
    </Picker>
  );
};

export default TypeSelect;
